<template>
  <table v-show="list && list.length > 0" class="table table-bordered table-hover">
    <caption>投研大咖说资料</caption>
    <thead>
      <tr>
        <th class="col-xs-2">ID/标题/主讲人<br>时间/标签</th>
        <th class="col-xs-2">配图</th>
        <th class="col-xs-2">简介</th>
        <th class="col-xs-2">会议纪要</th>
        <th>音频</th>
        <th>附件</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="it in list">
        <td>
          ID：{{it.id}}<br>
          标题：{{it.title}}<br>
          主讲人：{{it.speakerInfos && it.speakerInfos[0].speaker}}<br>
          主讲人公司：{{it.speakerInfos && it.speakerInfos[0].company}}<br>
          主讲人职位：{{it.speakerInfos && it.speakerInfos[0]. jobTitle}}<br>
          时间：{{it.pubDate | timeToString}}<br>
          标签：{{it.tags && it.tags.join('，')}}
        </td>
        <td v-if="it.voiceInfoDtos && it.voiceInfoDtos[0]">
          <img class="pic" :src="it.voiceInfoDtos[0].voicePicUrl">
        </td>
        <td>{{it.body}}</td>
        <td>{{it.meetingSummary}}</td>
        <td><a :href="it.voiceInfoDtos[0].voiceUrl" target="_blank">试听</a></td>
        <td>
          <div v-if="it.attachments">
            <a class="attachment" v-for="attachment in it.attachments" :href="attachment.url" target="_blank">{{attachment.name}}</a>
          </div>
        </td>
        <td class="col-nowrap text-right">
          <button class="btn btn-sm btn-primary" @click="updateItem(it)">修改信息</button>
          <button class="btn btn-sm btn-primary" @click="showUploader(it.id)">上传附件</button>
          <button class="btn btn-sm btn-danger" @click="deleteItem(it.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
  <vue-uploader v-ref:uploader></vue-uploader>
</template>
<style src="./item-list.css" scoped></style>
<script src="./item-list.js"></script>